<template>
    <div class="line">
        <div class="tops">
            <div>
                <span>折线图表</span>
                <p class="bot"></p>
            </div>
        </div>
        <div class="bots" ref="bots">

        </div>
        
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
let bots = ref()
onMounted(()=>{
    let lineEcharts = echarts.init(bots.value)
    lineEcharts.setOption(option)
})
let btnData = ["水稻", "油菜", "玉米"], seriesData = [
   [230, 600, 200, 360, 230, 650],
//    [210, 300, 200, 330, 320, 450],
//    [220, 400, 200, 320, 230, 350],
//    [200, 300, 500, 2000, 130, 450],
//    [210, 300, 200, 330, 320, 450],

], dataX = [
   "2020年12月30日",
   "2021年12月30日",
   "2022年12月26日",
   "2022年12月27日",
   "2022年12月28日",
   "2022年12月29日",
], series = [],
   selected = {};
btnData.map((item, index) => {
   // console.log(item, seriesData[index]);
   if (index == 0) {
      selected[item] = true;
   } else {
      selected[item] = false;
   }
   series.push({
      name: item,
      type: "line",
      data: seriesData[index],
      symbol: "none",
      areaStyle: {
         //区域填充样式
         normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  { offset: 0, color: "#E7AC13" },
                  { offset: 1, color: "rgba(61,234,255, 0)" },
               ],
               false
            ),
         },
      },
      lineStyle: {
         show: true,
         normal: {
            width: 2,
            color: {
               type: "linear",
               colorStops: [
                  {
                     offset: 0,
                     color: "rgba(0, 253, 255, 1)", // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: "rgba(0, 253, 255, 0.60)", // 100% 处的颜色
                  },
               ],
               globalCoord: false, // 缺省为 false
            },
            shadowColor: "rgba(72,216,191, 0.3)",
         },
      },
      smooth: true,
   });
});
let option = {
//    backgroundColor: "#333",
   //你的代码
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      borderColor: "transparent",
      textStyle: {
         color: "#fff",
      },
      // axisPointer: {
      //   type: "cross",
      //   label: {
      //     backgroundColor: "rgba(61,234,255, 0.5)",
      //   },
      // },
      formatter: function (a) {
         let list = [];
         let listItem = "";
         for (var i = 0; i < a.length; i++) {
            list.push(
               `${a[i].name}：<br/> ${a[i].marker}${a[i].seriesName}：${a[i].value}吨`
            );
         }
         listItem = list.join("<br/>");
         return '<div style="padding:6px;">' + listItem + "</div>";
      },
   },
   grid: {
      top: "20%",
      right: "0%",
      left: "10%",
      bottom: "16%",
   },
   legend: {
      top: "4%",
      right: 0,
      itemGap: 10,
      textStyle: {
         color: "#fff",
         fontSize: 12,
      },
      itemWidth: 12,
      itemHeight: 10,
      selectedMode: "single",
      selected: selected,
      data: btnData,
   },
   xAxis: [
      {
         type: "category",
         // boundaryGap: false,
         // interval: 5, // 步长
         // min: 10, // 起始
         // max: 50, // 终止
         data: dataX,
         axisLine: {
            lineStyle: {
               color: "#066BFE",
            },
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            formatter: "{value}",
            textStyle: {
               color: "#fff",
            },
         },
      },
   ],
   yAxis: [
      {
         type: "value",
         name: "单位：吨",
         splitNumber: 4,
         splitLine: {
            lineStyle: {
               // type: "dashed",
               color: "rgba(255, 255, 255, 0.2)",
            },
         },
         axisLabel: {
            // formatter: "{value}",
            formatter: function (value, index) {
               // if (value >= 10000) {
               //   return value / 10000;
               // } else {
               //   return value;
               // }
               return value;
            },
            textStyle: {
               color: "#fff",
            },
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "#066BFE",
            },
         },
         nameTextStyle: {
            color: "#fff",
         },
         splitArea: {
            show: false,
         },
      },
   ],
   series: series,
};

// let active = 1;
// setInterval(() => {
//    let option = myChart.getOption();
//    // console.log(option)
//    let selected = {};
//    for (let i = 0; i < option.legend[0].data.length; i++) {
//       // this.legendData是legend中data的值，上面是写死的值，做自动切换时不要写死
//       if (active == i) {
//          selected[option.legend[0].data[i]] = true;
//       } else {
//          selected[option.legend[0].data[i]] = false;
//       }
//    }
//    myChart.clear();
//    // console.log(option.legend, "lend---------------");
//    // 清空原来的折线图
//    option.legend[0].selected = selected;
//    //更改legend里的selected
//    myChart.setOption(option);
//    //重绘
//    active += 1;

//    if (active == option.legend[0].data.length) {
//       active = 0;
//    }

// }, 5000);
</script>

<style scoped lang="scss">
.line {
    height: 28%;

    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: cover;

    .tops {
        margin-top: 0;
        height: 50px;
        width: 100%;
        height: 32%;

        div {
            font-size: 20px;
            width: 60%;
            margin-left: 10px;
            margin-top: -10px;

            .bot {
                margin-top: 10px;
                height: 5px;
                background: url(../../images/dataScreen-title.png) no-repeat;

            }
        }

    }

    .bots {
        width: 100%;
        height: 200px;
    }
}
</style>